<template>
  <div class="">
    <van-nav-bar
      @click-left="$router.back()"
      left-arrow
      title="表单提交列表"
      fixed
    ></van-nav-bar>
    <div class="poster_type">
      <ul>
        <li :class="{ active: type == 1 }" @click="setType(1)">
          全部
          <i></i>
        </li>
        <li :class="{ active: type == 3 }" @click="setType(3)">
          文章
          <i></i>
        </li>
        <li :class="{ active: type == 4 }" @click="setType(4)">
          海报
          <i></i>
        </li>
        <li :class="{ active: type == 5 }" @click="setType(5)">
          视频
          <i></i>
        </li>
        <li :class="{ active: type == 6 }" @click="setType(6)">
          活动
          <i></i>
        </li>
      </ul>
    </div>
    <van-search v-model="searchKey" shape="round" placeholder="搜索名称" />
    <main>
      <div class="one" v-if="tabType == 1 && formInfo.length !== 0">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :immediate-check="false"
          @load="onLoad"
        >
          <div
            class="item"
            @click="$router.push('/formDetail?id=' + item.id)"
            v-for="item in formInfo"
            :key="item.id"
          >
            <div class="top">
              <div class="left">
                <img :src="$publicObj.urlImg(item.img)" alt="" />
              </div>
              <div class="right">
                <h3>{{ item.name }}</h3>
                <div class="foot">
                  <p>
                    <img src="../../assets/images/form/phone.png" alt="" />
                    {{ item.phone }}
                  </p>
                  <span>{{ item.gmtCreate }}</span>
                </div>
              </div>
            </div>
            <div class="bottom">来源：优联互通</div>
            <div class="badge">
              <img
                src="../../assets/images/form/visit.png"
                alt=""
                class="visit"
                v-if="item.responses"
              />
              <img
                src="../../assets/images/form/article.png"
                alt=""
                class="abp"
                v-if="item.tableType == 1"
              />
              <img
                src="../../assets/images/form/poster.png"
                alt=""
                class="abp"
                v-else-if="item.tableType == 3"
              />
              <img
                src="../../assets/images/form/video.png"
                alt=""
                class="abp"
                v-else
              />
            </div>
          </div>
        </van-list>
      </div>
      <div class="two" v-else-if="tabType == 2 && formInfo.length !== 0">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :immediate-check="false"
          @load="onLoad"
        >
          <div
            class="item"
            @click="$router.push('/formList?id=' + item.id)"
            v-for="item in formInfo"
            :key="item.id"
          >
            <div class="left">
              <img :src="item.cover" alt="" />
            </div>
            <div class="right">
              <h3>{{ item.title }}</h3>
              <p>
                <strong style="color:red"
                  >{{ item.submitTheNumber || 0 }} </strong
                >人已提交
              </p>
              <span>{{ item.foundTime }}</span>
            </div>
            <div class="badge">
              <img
                src="../../assets/images/form/article.png"
                alt=""
                class="abp"
                v-if="item.tableType == 1"
              />
              <img
                src="../../assets/images/form/poster.png"
                alt=""
                class="abp"
                v-else-if="item.tableType == 3"
              />
              <img
                src="../../assets/images/form/video.png"
                alt=""
                class="abp"
                v-else
              />
            </div>
          </div>
        </van-list>
      </div>

      <van-empty description="暂无数据" v-else />
    </main>

    <footer>
      <div class="item" @click="tabTypeClick(1)">
        <img
          src="../../assets/images/form/com_m.png"
          alt=""
          v-if="tabType == 2"
        />
        <img src="../../assets/images/form/com_a.png" alt="" v-else />
        按客户
      </div>
      <div class="item" @click="tabTypeClick(2)">
        <img
          src="../../assets/images/form/content_m.png"
          alt=""
          v-if="tabType == 1"
        />
        <img src="../../assets/images/form/content_a.png" alt="" v-else />
        按内容
      </div>
    </footer>
  </div>
</template>

<script>
// 引入echarts
export default {
  name: "",
  data() {
    return {
      searchKey: "", //搜索关键字
      type: 1, //任务类型
      formInfo: [], //表单列表
      tabType: 2,
      index: "",
      loading: false,
      finished: false,
      page: 1, //页数
      limit: 8, //条数
      totalPage: 100, //总页数
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    document.querySelector("html").style.backgroundColor = "#f3f5f7";
    document.querySelector("body").style.backgroundColor = "#f3f5f7";
    this.setType(1);
  },
  methods: {
    //触底下一页
    onLoad() {
      if (this.page >= this.totalPage) {
        this.finished = true;
        return;
      }
      this.page++;

      this.getFormInfo();
      // 加载状态结束
      this.loading = false;
    },
    //tab奇幻
    tabTypeClick(n) {
      this.tabType = n;
      this.taskArr = [];
      this.getFormInfo();
    },
    // 切换
    setType(n) {
      this.taskArr = [];
      this.type = n;
      if (n == 1) {
        this.index = "";
      } else if (n == 3) {
        this.index = 1;
      } else if (n == 4) {
        this.index = 3;
      } else if (n == 5) {
        this.index = 4;
      } else if (n == 6) {
        this.index = 5;
      }
      this.getFormInfo();
    },
    getFormInfo() {
      let obj = {
        id: sessionStorage.getItem("agentId"),
        type: this.index,
        tableType: this.tabType,
        page: this.page,
        limit: this.limit,
      };
      this.$api.getFormInfo(obj).then((res) => {
        if (res.code !== 0) return;
        //判断是否是第一页
        if (this.page == 1) {
          this.formInfo = res.data.records || [];
        } else {
          this.formInfo.push(...res.data.records);
        }
        this.totalPage = res.data.pages;
      });
    },
  },
};
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.poster_type {
  padding: 0 30px;
  padding-top: 55px;
  background-color: #fff;
  ul {
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    li {
      font-size: 16px;
      color: #666;
      display: -webkit-flex;
      display: flex;
      justify-content: center;
      position: relative;
      align-items: center;
      padding: 5px 0;
      i {
        width: 28px;
        height: 3px;

        border-radius: 3px;
        position: absolute;
        bottom: 0;
      }
    }
    .active {
      font-weight: 700;
      color: #000;
      i {
        background-color: #0264d1;
      }
    }
  }
}
main {
  padding: 0 15px;
  height: calc(100vh - 180px);
  overflow-y: scroll;
  .one {
    .item {
      position: relative;
      padding: 14px 8px 9px;
      background-color: #ffffff;
      border-radius: 5px;
      box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.06);
      margin-top: 12px;
      .top {
        display: flex;
        width: 100%;
        .left {
          img {
            width: 53px;
            height: 53px;
          }
        }
        .right {
          flex: 1;
          margin-left: 11px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          h3 {
            font-size: 14px;
            color: #333333;
          }
          .foot {
            display: flex;
            align-items: center;
            justify-content: space-between;
            p {
              font-size: 11px;
              color: #666666;
              display: flex;
              align-items: center;
              img {
                width: 15px;
                height: 15px;
                margin-right: 5px;
              }
            }
            span {
              font-size: 10px;
              color: #999999;
            }
          }
        }
      }
      .bottom {
        margin-top: 10px;
        font-size: 11px;
        color: #666666;
      }
      .badge {
        position: absolute;
        top: 0;
        right: 3px;
        display: flex;
        .abp {
          width: 32px;
          height: 20px;
        }
        .visit {
          width: 44px;
          height: 19px;
          margin-right: 10px;
        }
      }
    }
  }
  .two {
    .item {
      display: flex;
      position: relative;
      background-color: #ffffff;
      border-radius: 8px;
      margin-top: 12px;
      box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.08);
      padding: 10px;
      .left {
        img {
          width: 88px;
          height: 88px;
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        margin-left: 13px;
        justify-content: space-between;
        padding: 5px 0;
        h3 {
          font-size: 14px;
          color: #000000;
        }
        p {
          font-size: 12px;
          color: #7a7a7a;
        }
        span {
          font-size: 12px;
          color: #999999;
        }
      }
      .badge {
        position: absolute;
        top: 0;
        right: 3px;
        display: flex;
        .abp {
          width: 32px;
          height: 20px;
        }
        .visit {
          width: 44px;
          height: 19px;
          margin-right: 10px;
        }
      }
    }
  }
}
footer {
  border-top: 1px solid #f1f1f1fb;
  display: flex;
  height: 40px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  .item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    color: #a3aab4;
    letter-spacing: 1px;
    img {
      width: 19px;
      height: 18px;
      margin-right: 6px;
    }
    &:first-of-type {
      border-right: 1px solid #f1f1f1fb;
    }
  }
}
</style>
